<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>沧海云视频-个人定制视频库</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/carousel.css">
  <link rel="stylesheet" href="css/docs.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>

<body style="background-color: #f1f1f1; padding-bottom: 0">

<div th:insert="~{header :: nav}"></div>


<!-- Start Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top: 50px">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li th:each="carouselPic,iterStat:${carouselPics}" data-target="#myCarousel" th:data-slide-to="${iterStat.index}" th:class="(${iterStat.index}==0)?'active':''"></li>
  </ol>
  <div class="carousel-inner text-center" role="listbox">
    <div th:each="carouselPic,iterStat:${carouselPics}" th:class="(${iterStat.index}==0)?'item active':'item'">
      <a th:href="@{/play(v=${carouselPic.value})}">
        <img th:src="${carouselPic.image}" alt="">
      </a>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<!-- End carousel -->

<!-- Start Content -->
<div class="container" style="padding-top: 0">

  <!-- 精选推荐 -->
  <div class="row">
    <div class="bs-callout bs-callout-danger">
      <h4 style="display: inline-block">精选推荐</h4>
      <button type="button" class="btn btn-danger pull-right">
        <span class="glyphicon glyphicon-refresh"></span> 换一批
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 col-sm-4 col-xs-6" th:each="recommend:${recommends}">
      <a th:href="@{/play(v=${recommend.value})}">
        <img th:src="${recommend.image}" alt="" class="img-responsive img-thumbnail" style="height: 90px">
      </a>
      <div class="caption">
        <p class="text-left" th:text="${recommend.title}"></p>
      </div>
    </div>
  </div>
  <!-- END 精选推荐 -->

  <!-- 电视剧 -->
  <div class="row">
    <div class="col-md-9">
      <div class="row">
        <div class="bs-callout bs-callout-danger">
          <h4 style="display: inline-block">电视剧</h4>
          <button type="button" class="btn btn-danger pull-right">
            <span class="glyphicon glyphicon-refresh"></span> 换一批
          </button>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-6" th:each="tvHot:${tvHots}">
              <a th:href="@{/play(v=${tvHot.value})}">
                <img th:src="${tvHot.image}" class="img-responsive img-thumbnail img-md">
              </a>
              <div class="caption">
                <p class="text-left" th:text="${tvHot.title}"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3 hidden-sm hidden-xs">
      <div class="top">
        <h3><span class="glyphicon glyphicon-play-circle"></span>  排行榜</h3>
      </div>
      <div class="list-group" style="padding-top: 5px;">
        <a th:each="tvTop:${tvTops}" th:href="@{/play(v=${tvTop.value})}" class="list-group-item" th:text="${tvTop.title}"></a>
      </div>
    </div>
  </div>
  <!-- END 电视剧 -->

  <!-- 电影 -->
  <div class="row">
    <div class="bs-callout bs-callout-danger">
      <h4 style="display: inline-block">电影</h4>
      <button type="button" class="btn btn-danger pull-right">
        <span class="glyphicon glyphicon-refresh"></span> 换一批
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 col-sm-4 col-xs-6" th:each="movie:${movies}">
      <a th:href="@{/play(v=${movie.value})}">
        <img th:src="${movie.image}" class="img-responsive img-thumbnail">
      </a>
      <div class="caption">
        <p class="text-left" th:text="${movie.title}"></p>
      </div>
    </div>
  </div>
  <!-- END 电影 -->

  <!-- 动漫 -->
  <div class="row">
    <div class="col-md-9">
      <div class="row">
        <div class="bs-callout bs-callout-danger">
          <h4 style="display: inline-block">动漫</h4>
          <button type="button" class="btn btn-danger pull-right">
            <span class="glyphicon glyphicon-refresh"></span> 换一批
          </button>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-6" th:each="animeHot:${animeHots}">
              <a th:href="@{/play(v=${animeHot.value})}">
                <img th:src="${animeHot.image}" class="img-responsive img-thumbnail img-md">
              </a>
              <div class="caption">
                <p class="text-left" th:text="${animeHot.title}"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3 hidden-sm hidden-xs">
      <div class="top">
        <h3><span class="glyphicon glyphicon-play-circle"></span>  最新更新</h3>
      </div>
      <div class="list-group" style="padding-top: 5px;">
        <a th:each="animeNew:${animeNews}" th:href="@{/play(v=${animeNew.value})}" class="list-group-item" th:text="${animeNew.title}"></a>
      </div>
    </div>
  </div>
  <!-- END 动漫 -->

</div>
<!-- End Content -->

<!-- Start Footer -->
<div class="footer">
  <div class="container">
    <p class="text-muted col-md-10">免责声明：所有资源均来自互联网解析，本站仅提供展示。</p>
    <p class="text-muted col-md-2 pull-right">
      <a href="http://www.miitbeian.gov.cn" target="_blank">鄂ICP备16007917号</a>
    </p>
  </div>
</div>
<!-- End Footer -->

</html>